/* Contabilidade Brasiliense - estilos do site
   Tema claro. Paleta oficial: #001232 / #0A2C4D / #4C81BE */

/* Mesmas familias do projeto, agora locais e com swap para nao bloquear texto. */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/bebas-neue-latin.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/montserrat-latin.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/mulish-latin.woff2') format('woff2')}

body{font-family:'Mulish',sans-serif;background:#ffffff;color:#3d5573}
h1,h2,h3,h4,h5{font-family:'Montserrat',sans-serif;color:#001232}
.font-campaign{font-family:'Bebas Neue',sans-serif}
.cb-icon{display:inline-block;vertical-align:-.125em;flex:none}
::selection{background:rgba(76,129,190,.22);color:#001232}
.skip-link{position:fixed;top:max(.75rem,env(safe-area-inset-top));left:max(.75rem,env(safe-area-inset-left));z-index:1000;padding:.75rem 1rem;border-radius:.75rem;background:#001232;color:#fff;font-size:.875rem;font-weight:700;box-shadow:0 8px 24px rgba(0,18,50,.28);transform:translateY(calc(-100% - 2rem));transition:transform .18s ease}
.skip-link:focus{transform:none;outline:3px solid #7fb1df;outline-offset:3px}
main[tabindex="-1"]:focus{outline:none}

/* ambiente de fundo (halos suaves sobre branco) */
.page-amb{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(55% 45% at 12% 6%, rgba(76,129,190,.10), transparent 60%),
  radial-gradient(45% 40% at 90% 18%, rgba(76,129,190,.08), transparent 60%),
  radial-gradient(60% 55% at 50% 112%, rgba(76,129,190,.06), transparent 60%), #ffffff}
.blob{position:fixed;border-radius:50%;filter:blur(90px);z-index:-2;opacity:.10;pointer-events:none;animation:blob 20s ease-in-out infinite}
.blob.b1{width:520px;height:520px;background:#4C81BE;top:-120px;left:-100px}
.blob.b2{width:460px;height:460px;background:#7ba7d0;top:38%;right:-140px;animation-duration:26s;animation-delay:-6s}
.blob.b3{width:560px;height:560px;background:#a9c6e2;bottom:-160px;left:24%;animation-duration:30s;animation-delay:-12s}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.1)}66%{transform:translate(-30px,20px) scale(.94)}}
/* ruído quase imperceptível: sobre branco ele suja rápido */
.page-noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* cartões: no tema claro o "vidro" vira papel branco com sombra suave */
.glass{background:#fff;border:1px solid #e3ebf4;box-shadow:0 1px 2px rgba(0,18,50,.04),0 10px 30px -18px rgba(0,18,50,.18)}
.glass-strong{background:#fff;border:1px solid #d8e4f1;box-shadow:0 2px 6px rgba(0,18,50,.06),0 18px 44px -20px rgba(0,18,50,.22)}
/* navbar continua translúcida, agora sobre branco */
.glass-nav{background:rgba(255,255,255,.78);border:1px solid #e3ebf4;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 20px -12px rgba(0,18,50,.18);transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease}
.site-header.is-scrolled .glass-nav{background:rgba(255,255,255,.94);border-color:#d8e4f1;box-shadow:0 12px 34px -20px rgba(0,18,50,.42)}

/* rótulo de seção */
.eyebrow{font-family:'Bebas Neue',sans-serif;letter-spacing:.14em;color:#3f6ea6}

/* texto em gradiente (escurecido para contrastar no branco) */
.gtext{background:linear-gradient(100deg,#0A2C4D,#3f6ea6 55%,#4C81BE);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gshift 6s linear infinite}
@keyframes gshift{to{background-position:220% 0}}

/* revelação por linha (hero) */
.split .line{overflow:hidden;display:block}
.split .line > span{display:block;transform:none;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.split.reveal-pending .line > span{transform:translateY(108%)}
.split.in .line:nth-child(2) > span{transition-delay:.12s}
.split.in .line:nth-child(3) > span{transition-delay:.24s}
.split.in .line > span{transform:none}

/* reveal ao rolar */
.reveal{opacity:1;transform:none;transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
.reveal.reveal-pending{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* ken-burns na foto do hero */
.ken{animation:ken 20s ease-in-out infinite alternate}
@keyframes ken{0%{transform:scale(1.02)}100%{transform:scale(1.14)}}

/* marquee */
.mq{-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-row{display:flex;gap:52px;white-space:nowrap;width:max-content;animation:mq 60s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}

/* float (cards flutuantes + ícones) */
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* borda em gradiente (plano popular) */
.gborder{position:relative}
.gborder::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,#4C81BE,#7ba7d0,rgba(76,129,190,.15) 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* FAQ */
.faq-panel{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.16,1,.3,1)}

/* holofote */
.spot{position:relative}
.spot::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(76,129,190,.08),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.spot:hover::before{opacity:1}

:focus-visible{outline:2px solid #4C81BE;outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.reveal.reveal-pending{opacity:1!important;transform:none!important}
  .split .line>span,.split.reveal-pending .line>span{transform:none!important}
}

/* Em telas pequenas os halos fixos e seus filtros custam varias repinturas por
   segundo. O gradiente estatico de .page-amb preserva a mesma atmosfera. */
@media (max-width:767px){
  .blob,.page-noise{display:none}
  .gtext,.float,.ken{animation:none}
}

/* gráfico de barras (Serviços): cresce ao entrar na tela */
.chart-bar{flex:1;min-width:0;height:0;align-self:flex-end;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#4C81BE,#3f6ea6);transition:height 1.1s cubic-bezier(.16,1,.3,1)}
.reveal.in .chart-bar{height:var(--h)}
.chart-bar:nth-child(2){transition-delay:.05s}.chart-bar:nth-child(3){transition-delay:.1s}.chart-bar:nth-child(4){transition-delay:.15s}.chart-bar:nth-child(5){transition-delay:.2s}.chart-bar:nth-child(6){transition-delay:.25s}.chart-bar:nth-child(7){transition-delay:.3s}.chart-bar:nth-child(8){transition-delay:.35s}.chart-bar:nth-child(9){transition-delay:.4s}.chart-bar:nth-child(10){transition-delay:.45s}.chart-bar:nth-child(11){transition-delay:.5s}.chart-bar:nth-child(12){transition-delay:.55s}


/* área de gráfico que se desenha ao entrar na seção (estilo Finex) */
.trend{position:absolute;top:0;left:0;right:0;height:min(56%,320px);z-index:-1;pointer-events:none;overflow:hidden}
.trend svg{width:100%;height:100%;display:block}
.trend-area{fill:url(#trend-grad);opacity:0;transition:opacity 1.4s ease .5s}
.trend-line{fill:none;stroke:#4C81BE;stroke-width:2.5;stroke-opacity:.65;stroke-linecap:round;stroke-dasharray:3000;stroke-dashoffset:3000;transition:stroke-dashoffset 2.4s cubic-bezier(.16,1,.3,1)}
.trend-dot{fill:#3f6ea6;opacity:0;transition:opacity .5s 2s}
.reveal.in .trend-area{opacity:1}
.reveal.in .trend-line{stroke-dashoffset:0}
.reveal.in .trend-dot{opacity:.9}
.trend-low{top:auto;bottom:26%}

/* Blog: listagem editorial, artigo e componentes de leitura. */
.blog-featured{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(20rem,.82fr);background:#fff;border:1px solid #dfe8f1;border-radius:2rem;overflow:hidden;box-shadow:0 22px 60px -40px rgba(0,18,50,.42)}
.blog-featured-media{display:block;min-height:28rem;overflow:hidden;background:#001232}
.blog-featured-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.blog-featured:hover .blog-featured-media img{transform:scale(1.025)}
.blog-featured-content{display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,4vw,3.75rem)}
.blog-featured-kicker{font-size:.72rem;line-height:1.3;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#53708d}
.blog-featured-kicker span{color:#0A2C4D}
.blog-featured-content h2{margin-top:1rem;font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.12;font-weight:750;letter-spacing:-.035em;color:#001232}
.blog-featured-content h2 a:hover,.blog-card h2 a:hover{color:#2d659f}
.blog-featured-content>p{margin-top:1.25rem;color:#526b84;line-height:1.72;font-size:1rem}
.blog-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;margin-top:1.25rem;font-size:.73rem;color:#718399}
.blog-read-link{display:inline-flex;align-items:center;gap:.45rem;width:max-content;margin-top:1.6rem;color:#0A2C4D;font-size:.85rem;font-weight:700}
.blog-read-link:hover{gap:.75rem;color:#2d659f}
.blog-list-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin:4.75rem 0 1.75rem}
.blog-list-heading h2{margin-top:.35rem;color:#001232;font-size:clamp(1.8rem,3vw,2.5rem);font-weight:750;letter-spacing:-.035em}
.blog-list-heading p{max-width:29rem;color:#64748b;font-size:.9rem;line-height:1.6;text-align:right}
.blog-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.blog-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid #dfe8f1;border-radius:1.5rem;box-shadow:0 14px 38px -34px rgba(0,18,50,.5);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.blog-card:hover{transform:translateY(-5px);border-color:#bdd0e3;box-shadow:0 24px 50px -34px rgba(0,18,50,.5)}
.blog-card-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#001232}
.blog-card-media>div{width:100%;height:100%;transition:transform .65s cubic-bezier(.16,1,.3,1)}
.blog-card:hover .blog-card-media>div{transform:scale(1.035)}
.blog-card-media img{width:100%;height:100%;object-fit:cover}
.blog-card-media>span{position:absolute;top:1rem;left:1rem;padding:.42rem .7rem;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 1px 5px rgba(0,18,50,.1);color:#0A2C4D;font-size:.61rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.blog-card-content{display:flex;flex:1;flex-direction:column;padding:1.65rem}
.blog-card-content .blog-card-meta{margin-top:0}
.blog-card h2{margin-top:.8rem;color:#001232;font-size:1.15rem;line-height:1.34;font-weight:700;letter-spacing:-.018em}
.blog-card-content>p{flex:1;margin-top:.75rem;color:#5b7088;font-size:.88rem;line-height:1.68}

.article-heading,.article-reading{max-width:50rem}
.article-cover-wrap{max-width:68rem}
.article-category{display:inline-flex;padding:.42rem .78rem;border-radius:999px;background:#eaf2f9;color:#0A2C4D;font-size:.65rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.article-deck{max-width:46rem;margin-top:1.25rem;color:#526b84;font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.7}
.article-byline{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem 1rem;margin-top:1.5rem;color:#66798e;font-size:.8rem}
.article-cover{overflow:hidden;border-radius:1.5rem;background:#001232;box-shadow:0 25px 60px -45px rgba(0,18,50,.65)}
.article-cover img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.article-cover figcaption{padding:.65rem 1rem;background:#fff;color:#728297;font-size:.7rem;text-align:right}
.article-cover figcaption a{color:#0A2C4D;text-decoration:underline;text-underline-offset:2px}
.article-takeaways{margin:0 0 3rem;padding:1.5rem 1.6rem;border:1px solid #d8e5f1;border-radius:1.25rem;background:linear-gradient(145deg,#f7fbff,#fff)}
.article-takeaways h2{color:#001232;font-size:.95rem;font-weight:750;letter-spacing:.02em}
.article-takeaways ul{display:grid;gap:.72rem;margin-top:1rem}
.article-takeaways li{position:relative;padding-left:1.5rem;color:#4c647c;font-size:.9rem;line-height:1.55}
.article-takeaways li::before{content:'✓';position:absolute;left:0;color:#2d659f;font-weight:800}
.artigo-corpo{color:#334d67;font-size:1.105rem;line-height:1.82}
.artigo-corpo > * + *{margin-top:1.3em}
.artigo-corpo h2{font-family:'Montserrat',sans-serif;font-size:clamp(1.45rem,3vw,1.85rem);font-weight:750;color:#001232;line-height:1.25;letter-spacing:-.025em;margin-top:2.55em}
.artigo-corpo h3{font-family:'Montserrat',sans-serif;font-size:1.25rem;font-weight:700;color:#001232;line-height:1.35;margin-top:1.9em}
.artigo-corpo p{margin-top:1.3em}
.artigo-corpo a{color:#174e84;font-weight:550;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:#9cbddd}
.artigo-corpo a:hover{text-decoration-color:#174e84}
.artigo-corpo strong{color:#001232;font-weight:700}
.artigo-corpo ul,.artigo-corpo ol{padding-left:1.45em;margin-top:1.35em}
.artigo-corpo ul{list-style:disc}.artigo-corpo ol{list-style:decimal}
.artigo-corpo li{margin-top:.58em;padding-left:.3em}.artigo-corpo li::marker{color:#3f73aa;font-weight:700}
.artigo-corpo blockquote{border-left:3px solid #4C81BE;padding:.25em 0 .25em 1.25em;color:#0A2C4D;font-style:italic}
.artigo-corpo .artigo-destaque{margin-top:2rem;padding:1.35rem 1.5rem;border:1px solid #cdddec;border-left:4px solid #3f73aa;border-radius:.9rem;background:#f5f9fd;color:#314e69;font-size:1rem;line-height:1.7}
.artigo-corpo img{border-radius:1rem;margin-top:1.75em}
.artigo-corpo figcaption{font-size:.85rem;color:#64748b;text-align:center;margin-top:.6em}
.artigo-corpo table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem;margin-top:1.8em;border:1px solid #dce6ef;border-radius:.85rem;overflow:hidden}
.artigo-corpo th,.artigo-corpo td{border-bottom:1px solid #e2e9f0;padding:.8em .9em;text-align:left;vertical-align:top}
.artigo-corpo tr:last-child td{border-bottom:0}.artigo-corpo th{background:#edf4fa;color:#001232;font-weight:700}
.artigo-corpo hr{border:0;border-top:1px solid #e3ebf4;margin-top:2.5em}
.artigo-corpo code{background:#f1f5f9;border-radius:.3em;padding:.15em .4em;font-size:.9em}
.article-faq{margin-top:4.5rem;padding-top:3rem;border-top:1px solid #dfe7ef}
.article-section-label{color:#52769a;font-size:.66rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase}
.article-faq>h2,.article-cta h2{margin-top:.45rem;color:#001232;font-size:clamp(1.5rem,3vw,2rem);line-height:1.25;font-weight:750;letter-spacing:-.025em}
.article-faq-list{display:grid;gap:.85rem;margin-top:1.5rem}
.article-faq-list article{padding:1.25rem 1.35rem;border:1px solid #dfe7ef;border-radius:1rem;background:#fff}
.article-faq-list h3{color:#001232;font-size:1rem;font-weight:700;line-height:1.45}
.article-faq-list p{margin-top:.55rem;color:#516a82;font-size:.9rem;line-height:1.68}
.article-cta{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem;margin-top:3.5rem;padding:clamp(1.6rem,4vw,2.4rem);border-radius:1.4rem;background:linear-gradient(135deg,#001232,#0A2C4D);box-shadow:0 24px 60px -40px rgba(0,18,50,.8)}
.article-cta .article-section-label{color:#9ec5e9}.article-cta h2{color:#fff}.article-cta p{max-width:36rem;margin-top:.7rem;color:#c8d8e7;font-size:.92rem;line-height:1.65}
.article-cta-button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.85rem 1.15rem;border-radius:999px;background:#fff;color:#001232;font-size:.78rem;font-weight:750;white-space:nowrap;transition:transform .2s ease,background .2s ease}
.article-cta-button:hover{transform:translateY(-2px);background:#eaf2f9}
.article-review{margin-top:2.5rem;padding:1.25rem 0;border-top:1px solid #dfe7ef;border-bottom:1px solid #dfe7ef;color:#60758b;font-size:.76rem;line-height:1.65}
.article-review strong{color:#193b5c}.article-review p{margin-top:.35rem}
.article-back-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:2rem;color:#0A2C4D;font-size:.82rem;font-weight:700}
.article-back-link:hover{gap:.75rem}
.blog-featured a:focus-visible,.blog-card a:focus-visible,.article-cta a:focus-visible,.article-back-link:focus-visible{outline:3px solid #7fb1df;outline-offset:4px;border-radius:.4rem}

@media (max-width:900px){
  .blog-featured{grid-template-columns:1fr}.blog-featured-media{min-height:0;aspect-ratio:16/9}.blog-featured-content{padding:2rem}
  .blog-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-list-heading{align-items:start;flex-direction:column;gap:.75rem}.blog-list-heading p{text-align:left}
}
@media (max-width:640px){
  .blog-card-grid{grid-template-columns:1fr}.blog-featured,.blog-card{border-radius:1.25rem}.blog-featured-content{padding:1.5rem}.blog-list-heading{margin-top:3.25rem}
  .article-heading,.article-reading,.article-cover-wrap{padding-left:1.25rem;padding-right:1.25rem}.article-cover{border-radius:1rem}.article-cover figcaption{text-align:left}
  .artigo-corpo{font-size:1.02rem;line-height:1.76}.artigo-corpo h2{margin-top:2.2em}.artigo-corpo table{font-size:.82rem}
  .article-takeaways{padding:1.25rem}.article-cta{grid-template-columns:1fr;gap:1.35rem}.article-cta-button{width:100%;white-space:normal;text-align:center}
}

/* ---------------------------------------------------------------------------
   Âncoras: o menu é fixo, então o alvo do link precisa parar abaixo dele,
   senão o título da seção fica escondido atrás da barra.
   --------------------------------------------------------------------------- */
section[id]{scroll-margin-top:6.5rem}

/* ---------------------------------------------------------------------------
   Selos das redes (bloco "Acompanhe também", em Conteúdos)

   As cores oficiais do YouTube e do Instagram ficam aqui, e nao como classe
   arbitraria do Tailwind: o CSS do projeto e compilado a partir das classes
   encontradas nos arquivos, e valor entre colchetes so entra no build se
   alguem lembrar de rodar o build de novo. Em CSS proprio nao ha esse risco.
   --------------------------------------------------------------------------- */
.selo-youtube{background:#FF0000;color:#fff}
.selo-instagram{color:#fff;
  background:linear-gradient(135deg,#F58529 0%,#DD2A7B 55%,#8134AF 100%)}

/* ---------------------------------------------------------------------------
   Grade dos depoimentos

   Colunas de verdade (nao grid): os textos das avaliacoes tem tamanhos bem
   diferentes e, em grid, as linhas ficariam com buracos. Aqui os cartoes se
   encaixam um embaixo do outro, como em uma alvenaria.

   Feito em CSS proprio porque os utilitarios `columns-*` do Tailwind nao vem
   na build do CDN que o site usa.
   --------------------------------------------------------------------------- */
.depo-colunas{column-count:1;column-gap:1.25rem}
.depo-colunas > li{break-inside:avoid;-webkit-column-break-inside:avoid;
  page-break-inside:avoid;margin-bottom:1.25rem;display:block}
@media (min-width:640px){.depo-colunas{column-count:2}}
@media (min-width:1024px){.depo-colunas{column-count:3}}

/* ---------------------------------------------------------------------------
   BOTÃO DE CONTATO (verde)

   Todo botão que abre um canal de conversa — WhatsApp ou telefone — usa este
   verde, o mesmo do botão flutuante. O navy segue sendo a cor dos botões de
   navegação e dos que levam a um formulário, para os dois papéis não
   competirem visualmente.

   `.btn-verde`         fundo verde, para o botão principal
   `.btn-verde-contorno` contorno verde, para o secundário ao lado dele
   --------------------------------------------------------------------------- */
.btn-verde{background:#25D366;color:#001232;border:1px solid #25D366;
  box-shadow:0 10px 26px -12px rgba(37,211,102,.65);
  transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.btn-verde:hover{background:#1da851;border-color:#1da851;
  box-shadow:0 12px 30px -12px rgba(29,168,81,.7)}
.btn-verde:focus-visible,#wafloat:focus-visible{outline:3px solid #001232;outline-offset:3px}
.btn-verde-contorno{color:#0f7a39;border:1px solid #71c993;background:transparent;
  transition:background .2s,border-color .2s,color .2s}
.btn-verde-contorno:hover{background:#effaf3;border-color:#1da851;color:#0b6b30}
/* sobre fundo escuro o contorno claro some, então ele clareia */
.bg-brand-900 .btn-verde-contorno,.lp-final .btn-verde-contorno,
.lp-commitment .btn-verde-contorno{color:#c9f2da;border-color:rgba(37,211,102,.5)}
.bg-brand-900 .btn-verde-contorno:hover,.lp-final .btn-verde-contorno:hover,
.lp-commitment .btn-verde-contorno:hover{background:rgba(37,211,102,.14);border-color:#25D366;color:#fff}

/* Contraste AA para o crachá sobre a fotografia do hero. */
.hero-credentials{background:#345c8b;color:#ffffff}
.difference-number{color:#3f6ea6}

/* Cada grupo do dl contém somente dt e dd. A grade preserva o ícone à
   esquerda sem inserir elementos irmãos inválidos dentro da lista. */
.identity-row{display:grid;grid-template-columns:2.25rem minmax(0,1fr);column-gap:1rem}
.identity-term,.identity-value{grid-column:2;min-width:0}
.identity-term{position:relative}
.identity-icon{position:absolute;top:0;right:calc(100% + 1rem);color:#3f6ea6}

/* Nas landing pages, todo botão de conversão/contacto usa o verde do
   WhatsApp. Links editoriais continuam em azul e não disputam atenção. */
.campaign-landing .site-header a[data-cta],
.campaign-landing main a[data-cta][class*="rounded-"],
.campaign-landing main button[data-cta]{background:#25D366!important;border-color:#25D366!important;color:#fff!important;
  box-shadow:0 12px 28px -13px rgba(37,211,102,.7)!important}
.campaign-landing .site-header a[data-cta]:hover,
.campaign-landing main a[data-cta][class*="rounded-"]:hover,
.campaign-landing main button[data-cta]:hover{background:#1da851!important;border-color:#1da851!important;color:#fff!important}

/* ---------------------------------------------------------------------------
   Formulários (usado na landing de regularização de CNPJ)
   --------------------------------------------------------------------------- */
.campo{width:100%;background:#fff;border:1px solid #d8e4f1;border-radius:.85rem;
  padding:.8rem 1rem;font-size:.95rem;color:#001232;
  transition:border-color .2s,box-shadow .2s}
.campo::placeholder{color:#94a3b8}
.campo:hover{border-color:#a9c6e2}
.campo:focus{outline:none;border-color:#4C81BE;box-shadow:0 0 0 3px rgba(76,129,190,.18)}
.campo-invalido{border-color:#dc2626;background:#fef7f7}
.campo-invalido:focus{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.15)}
/* o select precisa da seta desenhada à mão: os nativos destoam entre navegadores */
select.campo{appearance:none;-webkit-appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%233f6ea6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
.campo-erro{font-size:.78rem;color:#b91c1c;margin-top:.35rem;line-height:1.4}
.form-alerta-erro{border:1px solid #fecaca;background:#fef2f2;color:#991b1b}

/* Microinteracoes curtas: resposta perceptivel sem deslocar o layout. */
[data-cta],.blog-read-link,.article-back-link{transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.service-card{transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .28s ease,box-shadow .28s ease,border-color .28s ease}
@media (hover:hover){
  [data-cta]:hover,.blog-read-link:hover,.article-back-link:hover{transform:translateY(-2px)}
  .service-card:hover{transform:translateY(-4px)}
}
[data-cta]:active,.blog-read-link:active,.article-back-link:active{transform:translateY(1px) scale(.99)}
button:disabled{cursor:wait;filter:saturate(.72)}

/* ---------------------------------------------------------------------------
   Cartões de situação (grade "sua empresa está passando por isto?")
   --------------------------------------------------------------------------- */
.situacao{display:flex;align-items:flex-start;gap:.7rem;background:#fff;
  border:1px solid #e3ebf4;border-radius:1rem;padding:.9rem 1.05rem;
  font-size:.875rem;line-height:1.45;color:#3d5573;
  transition:border-color .25s,transform .25s,box-shadow .25s}
.situacao:hover{border-color:#a9c6e2;transform:translateY(-2px);
  box-shadow:0 10px 24px -16px rgba(0,18,50,.35)}
.situacao .cb-icon{color:#4C81BE;flex:none;margin-top:.12rem}

/* Quando a seção tem fundo próprio, o z-index negativo do .trend o esconderia
   atrás dele. Nesses casos o gráfico sobe para z-index 0 e o conteúdo fica na
   frente por z-index próprio. */
.trend-sobre-fundo{z-index:0}
.trend-sobre-fundo + *{position:relative;z-index:1}

/* ---------------------------------------------------------------------------
   Landing pages de serviço

   Peças compartilhadas pelas landings de campanha (migração de contabilidade,
   regularização de CNPJ). O prefixo `lp-` é o nome atual; o `mig-` nasceu na
   landing de migração e continua valendo para não reescrever aquela página.
   Ao criar uma landing nova, use `lp-`.
   --------------------------------------------------------------------------- */
.migracao-page .glass-nav,
.regularizacao-page .glass-nav{box-shadow:0 10px 34px -20px rgba(0,18,50,.35)}
.mig-hero,.lp-hero{background:
  linear-gradient(180deg,rgba(238,244,250,.65),rgba(255,255,255,.98) 62%),
  repeating-linear-gradient(90deg,transparent 0,transparent calc(8.333% - 1px),rgba(76,129,190,.08) calc(8.333% - 1px),rgba(76,129,190,.08) 8.333%)}
.mig-hero::after,.lp-hero::after{content:"";position:absolute;width:34rem;height:34rem;right:-12rem;top:4rem;border:1px solid rgba(76,129,190,.12);border-radius:50%;box-shadow:0 0 0 4rem rgba(76,129,190,.035),0 0 0 9rem rgba(76,129,190,.025);pointer-events:none}
.mig-form,.lp-form{box-shadow:0 34px 80px -34px rgba(0,18,50,.38)}
.mig-form textarea,.lp-form textarea{line-height:1.45}
.mig-stat,.lp-stat{position:relative;background:#fff;border:1px solid #e3ebf4;overflow:hidden;box-shadow:0 16px 42px -28px rgba(0,18,50,.35)}
.mig-stat::before,.lp-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#4C81BE,#0A2C4D)}
.mig-dark-orb,.lp-dark-orb{position:absolute;width:44rem;height:44rem;border-radius:50%;right:-20rem;top:-24rem;background:radial-gradient(circle,rgba(76,129,190,.34),rgba(76,129,190,0) 65%);pointer-events:none}
.mig-photo-shell,.lp-photo-shell{position:relative}
.mig-photo-shell>div:first-child,.lp-photo-shell>div:first-child{box-shadow:0 24px 58px -30px rgba(0,18,50,.5)}
.mig-photo-shell::before,.lp-photo-shell::before{content:"";position:absolute;inset:-.7rem .7rem .7rem -.7rem;border:1px solid #a9c6e2;border-radius:2rem;pointer-events:none}
.mig-photo-caption,.lp-photo-caption{position:absolute;left:1.15rem;right:1.15rem;bottom:1.15rem;display:flex;align-items:center;gap:.55rem;width:max-content;max-width:calc(100% - 2.3rem);padding:.72rem 1rem;border:1px solid rgba(255,255,255,.75);border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 32px -18px rgba(0,18,50,.55);font-size:.75rem;font-weight:700;color:#0A2C4D}
.mig-testimonial,.lp-testimonial{position:relative;background:linear-gradient(135deg,#fff 0%,#f6f9fc 62%,#eef4fa 100%);border:1px solid #d8e4f1;box-shadow:0 28px 70px -40px rgba(0,18,50,.45)}
.mig-testimonial::before,.lp-testimonial::before{content:"“";position:absolute;right:2rem;top:.6rem;font-family:'Bebas Neue',sans-serif;font-size:9rem;line-height:1;color:rgba(76,129,190,.09);pointer-events:none}
.mig-steps li,.lp-steps li{isolation:isolate}
.mig-commitment,.lp-commitment{background:linear-gradient(120deg,#001232 0%,#0A2C4D 68%,#123e68 100%);box-shadow:0 30px 80px -40px rgba(0,18,50,.65)}
.mig-final,.lp-final{background:#001232;box-shadow:0 34px 85px -42px rgba(0,18,50,.7)}
.lp-authority{background:#0A2C4D;box-shadow:0 28px 65px -38px rgba(0,18,50,.75)}
.lp-final-modern{background:linear-gradient(120deg,#001232 0%,#0A2C4D 72%,#123f69 100%)}
.lp-final-socios{position:relative;background:#0A2C4D}
.lp-final-socios::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 58%,#0A2C4D 100%);pointer-events:none}
.mig-final .mig-photo-shell::before,.mig-final .mig-photo-caption,
.lp-final .lp-photo-shell::before,.lp-final .lp-photo-caption{display:none}
.mig-final .mig-photo-shell,.mig-final .mig-photo-shell>div:first-child,
.lp-final .lp-photo-shell,.lp-final .lp-photo-shell>div:first-child{height:100%}
.mig-final .mig-photo-shell>div:first-child,
.lp-final .lp-photo-shell>div:first-child{border-radius:0;box-shadow:none}

/* Grade de situações atendidas: cartão compacto sobre o navy da marca */
.lp-caso{display:flex;align-items:center;gap:.75rem;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);border-radius:1rem;padding:1rem 1.1rem;
  font-size:.9rem;line-height:1.4;color:rgba(226,238,250,.9);
  transition:background .25s,border-color .25s,transform .25s}
.lp-caso:hover{background:rgba(255,255,255,.1);border-color:rgba(169,198,226,.45);transform:translateY(-2px)}
.lp-caso .cb-icon{color:#a9c6e2;flex:none}

@media (min-width:1024px){
  /* Com os formulários reduzidos, o conjunto completo de mensagem + captura
     cabe na primeira dobra dos notebooks e monitores mais comuns.
     O padding-top existia para o hero passar por baixo da barra fixa. As
     landings agora abrem com a marca no fluxo da página (partials/header.php),
     então o espaço é descontado da altura em vez de somado acima. */
  .campaign-landing .mig-hero,
  .campaign-landing .lp-hero,
  .campaign-landing .health-hero{display:flex;align-items:center;min-height:calc(100vh - 8rem);min-height:calc(100svh - 8rem);padding-bottom:1.75rem!important}
  .campaign-landing .mig-hero h1,
  .campaign-landing .lp-hero h1,
  .campaign-landing .health-hero h1{font-size:clamp(4rem,5.35vw,4.65rem)}
  .campaign-landing .mig-hero>div,
  .campaign-landing .lp-hero>div,
  .campaign-landing .health-hero>div:not(.health-orbit){width:100%}

  /* As copies das 21 landings segmentadas sao mais longas que as dos tres
     modelos originais. Compactamos somente a primeira dobra das replicas para
     manter titulo, explicacao, formulario e os tres beneficios no viewport de
     notebooks, sem alterar a escala das paginas-matriz. */
  .campaign-landing.segmento-servico-page .mig-hero,
  .campaign-landing.segmento-servico-page .lp-hero,
  .campaign-landing.segmento-servico-page .health-hero{
    min-height:calc(100vh - 6rem);
    min-height:calc(100svh - 6rem);
    padding-top:.75rem!important;
    padding-bottom:1rem!important
  }
  .segmento-servico-page .mig-hero h1,
  .segmento-servico-page .lp-hero h1,
  .segmento-servico-page .health-hero h1{
    margin-top:1rem;
    font-size:clamp(3.45rem,4.55vw,4.1rem)
  }
  .segmento-servico-page .mig-hero h1+p,
  .segmento-servico-page .lp-hero h1+p,
  .segmento-servico-page .health-hero h1+p{
    margin-top:1rem;
    font-size:1rem;
    line-height:1.5
  }
  .segmento-servico-page .mig-hero h1+p+ul,
  .segmento-servico-page .lp-hero h1+p+ul,
  .segmento-servico-page .health-hero h1+p+ul{
    margin-top:1rem;
    gap:.5rem
  }
  .segmento-servico-page .mig-hero h1+p+ul>li,
  .segmento-servico-page .lp-hero h1+p+ul>li,
  .segmento-servico-page .health-hero h1+p+ul>li{
    font-size:.8rem;
    line-height:1.25
  }
  .segmento-servico-page .mig-hero h1+p+ul>li>span,
  .segmento-servico-page .lp-hero h1+p+ul>li>span,
  .segmento-servico-page .health-hero h1+p+ul>li>span{
    width:1.75rem;
    height:1.75rem
  }
  .mig-steps li:not(:last-child)::after,
  .lp-steps li:not(:last-child)::after{content:"";position:absolute;top:4rem;right:-1.3rem;width:2.6rem;height:1px;background:#a9c6e2;z-index:2}
}
@media (max-width:639px){
  .mig-hero::after,.lp-hero::after{width:20rem;height:20rem;right:-13rem;top:7rem}
  .mig-photo-caption,.lp-photo-caption{font-size:.69rem}
  .mig-testimonial::before,.lp-testimonial::before{font-size:6rem;right:1rem}
}

/* ---------------------------------------------------------------------------
   Landing de abertura de CNPJ para profissionais da saude
   --------------------------------------------------------------------------- */
.saude-page .glass-nav{box-shadow:0 10px 34px -20px rgba(0,18,50,.35)}
.health-hero{background:
  radial-gradient(50% 48% at 88% 8%,rgba(76,129,190,.14),transparent 70%),
  linear-gradient(180deg,rgba(238,244,250,.72),rgba(255,255,255,.98) 68%)}
.health-hero::before{content:"";position:absolute;inset:0;opacity:.35;background-image:linear-gradient(rgba(76,129,190,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(76,129,190,.08) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 75%);mask-image:linear-gradient(to bottom,#000,transparent 75%);pointer-events:none}
.health-orbit{position:absolute;width:38rem;height:38rem;right:-16rem;top:1rem;border:1px solid rgba(76,129,190,.16);border-radius:50%;box-shadow:0 0 0 4rem rgba(76,129,190,.035),0 0 0 9rem rgba(76,129,190,.02);pointer-events:none}
.health-form{box-shadow:0 34px 80px -34px rgba(0,18,50,.42)}
.health-form-media{position:relative;height:10rem;overflow:hidden;background:#0A2C4D}
.health-form-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,18,50,.02),rgba(0,18,50,.5))}
.health-form-badge{position:absolute;left:1rem;bottom:1rem;z-index:1;display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .8rem;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#0A2C4D}
.health-specialty{display:inline-flex;align-items:center;gap:.55rem;padding:.72rem 1rem;border:1px solid #d8e4f1;border-radius:999px;background:#fff;box-shadow:0 8px 22px -18px rgba(0,18,50,.35);font-size:.82rem;font-weight:600;color:#0A2C4D;transition:transform .25s,border-color .25s,box-shadow .25s}
.health-specialty .cb-icon{color:#4C81BE}
.health-specialty:hover{transform:translateY(-2px);border-color:#a9c6e2;box-shadow:0 12px 28px -18px rgba(0,18,50,.42)}
.health-dark-grid{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(169,198,226,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(169,198,226,.22) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%)}
.health-diff{position:relative;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.health-diff::after{content:"";position:absolute;width:5rem;height:5rem;border:1px solid rgba(76,129,190,.12);border-radius:50%;right:-2rem;bottom:-2rem}
.health-diff:hover{transform:translateY(-5px);border-color:#a9c6e2;box-shadow:0 20px 38px -26px rgba(0,18,50,.42)}
.health-doctor{background:linear-gradient(118deg,#001232 0%,#0A2C4D 64%,#164b78 100%);box-shadow:0 30px 80px -40px rgba(0,18,50,.65)}
.health-pulse{position:absolute;inset:0;opacity:.18;background:radial-gradient(circle at 82% 15%,rgba(169,198,226,.65),transparent 35%)}
.health-pulse::before,.health-pulse::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.25);border-radius:50%}
.health-pulse::before{width:19rem;height:19rem;right:-6rem;top:-8rem}
.health-pulse::after{width:12rem;height:12rem;right:-2.5rem;top:-4.5rem}
.health-final{background:linear-gradient(120deg,#001232 0%,#0A2C4D 72%,#123f69 100%);box-shadow:0 34px 85px -42px rgba(0,18,50,.7)}
.health-final-photo{position:relative;overflow:hidden}
.health-final-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0A2C4D 0%,rgba(10,44,77,.25) 42%,transparent 72%);pointer-events:none}

@media (max-width:1023px){
  .lp-final-socios::after{background:linear-gradient(180deg,transparent 65%,#0A2C4D 100%)}
  .health-final-photo::after{background:linear-gradient(180deg,#0A2C4D 0%,rgba(10,44,77,.12) 28%,transparent 56%)}
}
@media (max-width:639px){
  .health-orbit{width:22rem;height:22rem;right:-15rem;top:8rem}
  .health-form-media{height:8.5rem}
  .health-specialty{font-size:.76rem;padding:.62rem .82rem}
}

/* ---------------------------------------------------------------------------
   Responsividade e ergonomia mobile

   Regras compartilhadas por todo o site. Elas complementam os breakpoints do
   Tailwind e protegem principalmente as larguras de 320 a 639 px, inclusive
   aparelhos com notch e navegacao por toque.
   --------------------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,iframe,svg{max-width:100%}
button,a,input,select,textarea{touch-action:manipulation}
h1,h2,h3,h4,h5,.artigo-corpo{overflow-wrap:break-word}
.grid>*{min-width:0}

/* Inputs com pelo menos 48 px e 16 px no celular evitam o zoom automatico do
   Safari ao receber foco. */
.campo{min-height:3rem}

/* Conteudo editorial nunca alarga a pagina: tabelas e blocos pre-formatados
   ganham rolagem propria quando forem maiores que a tela. */
.artigo-corpo table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.artigo-corpo pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.artigo-corpo code{overflow-wrap:anywhere}

/* Cabecalho e menu respeitam as areas seguras do iOS. O menu continua usavel
   em celulares na horizontal e em aparelhos de pouca altura. */
.site-header{padding-top:max(1rem,env(safe-area-inset-top));padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}
#mobile-menu{min-height:100vh;min-height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:5.5rem 1.5rem 2rem;padding:5.5rem max(1.5rem,env(safe-area-inset-right)) max(2rem,env(safe-area-inset-bottom)) max(1.5rem,env(safe-area-inset-left));opacity:0;transform:translateY(-.5rem);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
#mobile-menu.menu-visible{opacity:1;transform:none;pointer-events:auto}
#mobile-menu a{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;max-width:100%;text-align:center}
#mobile-menu.flex{justify-content:flex-start;gap:1rem}
#mobile-menu .mobile-submenu-panel a{justify-content:flex-start;min-height:2.5rem;text-align:left}
#mobile-menu .mobile-submenu-toggle[aria-expanded="true"]{background:#eef4fa}
#close-menu{top:1.25rem;right:1.25rem;top:max(1.25rem,env(safe-area-inset-top));right:max(1.25rem,env(safe-area-inset-right))}
body.menu-open #wafloat{opacity:0;pointer-events:none}

/* CTAs longos podem quebrar em duas linhas sem serem cortados. */
.hero-kicker{max-width:100%;white-space:normal;line-height:1.35}
main a[data-cta]:not(.glass),main button[data-cta],.cta-actions a{max-width:100%;white-space:normal;text-align:center;line-height:1.3;min-height:2.75rem}

/* Alvos de toque do rodape e botao flutuante. */
.footer-social{width:2.75rem;height:2.75rem;border-radius:999px}
#wafloat{bottom:1rem;right:1rem;bottom:max(1rem,env(safe-area-inset-bottom));right:max(1rem,env(safe-area-inset-right))}

@media (max-width:639px){
  /* Mais area util em telas estreitas, mantendo uma margem confortavel. */
  .mx-auto.px-6{padding-left:1rem;padding-right:1rem}

  /* Ritmo vertical mais curto: landings longas deixam de parecer interminaveis
     no celular, sem comprimir a leitura. */
  section.py-24{padding-top:4.5rem;padding-bottom:4.5rem}
  section.py-20{padding-top:4rem;padding-bottom:4rem}
  section.pb-24{padding-bottom:4.5rem}
  section.pb-20{padding-bottom:4rem}

  .campo{font-size:16px;line-height:1.35}
  textarea.campo{min-height:6rem}

  .mig-hero h1,.lp-hero h1,.health-hero h1{font-size:clamp(2.85rem,15vw,3.35rem);letter-spacing:.025em}
  .hero-kicker{align-items:flex-start;border-radius:1rem;text-align:left}
  .health-specialty{max-width:100%;white-space:normal;line-height:1.3}

  /* Os atrasos escalonados sao bonitos no desktop, mas fazem a pagina parecer
     lenta no celular quando muitos cartoes entram juntos. */
  .reveal.d1,.reveal.d2,.reveal.d3{transition-delay:0s}

  .faq-panel>p{padding-right:.5rem}
  .mig-photo-shell::before,.lp-photo-shell::before{inset:-.45rem .45rem .45rem -.45rem}
  .mig-photo-caption,.lp-photo-caption{left:.85rem;right:.85rem;bottom:.85rem;width:auto;max-width:none;border-radius:1rem;line-height:1.3}

  .migracao-page main .p-7,.regularizacao-page main .p-7,.saude-page main .p-7{padding:1.25rem}
  .migracao-page main .p-8,.regularizacao-page main .p-8,.saude-page main .p-8,.glass-strong.p-8{padding:1.5rem}

  .blog-filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;margin-left:-1rem;margin-right:-1rem;padding:0 1rem .35rem;scrollbar-width:none}
  .blog-filters::-webkit-scrollbar{display:none}
  .blog-filters>a{flex:none;scroll-snap-align:start}

  .blog-pagination{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem;width:100%}
  .blog-pagination-status{grid-column:1/-1;grid-row:1;text-align:center}
  .blog-pagination>a,.blog-pagination>span:not(.blog-pagination-status){justify-content:center;min-width:0;padding-left:1rem;padding-right:1rem}

  .footer-links a{display:inline-flex;align-items:center;min-height:2.75rem}
}

@media (max-width:479px){
  main a[data-cta]:not(.glass),main button[data-cta],.cta-actions a{width:100%;justify-content:center}
  .cta-actions{width:100%}
}

@media (max-width:1023px) and (max-height:640px){
  #mobile-menu.flex{justify-content:flex-start;gap:1rem}
}

@media (hover:none){
  .spot::before{display:none}
  .situacao:hover,.lp-caso:hover,.health-diff:hover{transform:none}
  [class*="hover:-translate-y"]:hover{transform:none!important}
}

/* ===========================================================================
   AJUSTES QUE NAO CABEM NAS UTILITARIAS
   O Tailwind deste projeto e PRE-COMPILADO (assets/css/tailwind.min.css) e nao
   ha passo de build no repositorio. Classe nova - principalmente valor
   arbitrario, tipo grid-cols-[...] - simplesmente nao existe no CSS e nao tem
   efeito nenhum. Ajuste que precise de valor novo entra aqui.
   ========================================================================= */

/* Landings de campanha: a marca agora fica no fluxo da pagina, nao numa barra
   fixa (ver partials/header.php). O padding-top grande das utilitarias existia
   so para o hero passar por baixo da barra; sem ela, virava um vao em branco. */
.campaign-landing .mig-hero,
.campaign-landing .lp-hero,
.campaign-landing .health-hero{padding-top:1.5rem!important}

/* "Quem somos" do sobre.php: o video e 9:16. Na coluna cheia ele fica bem mais
   alto que o texto ao lado e abre um vao embaixo, entao estreita no desktop. */
@media (min-width:1024px){
  .sobre-video{max-width:15rem;margin-left:auto;margin-right:auto}
}

/* Hero da home: moldura quadrada para caberem os dois socios lado a lado. */
.hero-socios{aspect-ratio:1/1}

/* Landings: gradiente do titulo sem movimento.
   O .gtext roda um gradiente em laco INFINITO (gshift). No site isso passa
   despercebido, mas no H1 de campanha - 5,3rem, varias linhas - vira um
   brilho constante competindo com a leitura. O gradiente fica; o laco sai. */
.campaign-landing .gtext{animation:none;background-position:0 0}

/* Sem entrada por rolagem, no site inteiro.
   O JS marca cada bloco com .reveal-pending (opacidade 0 + deslocamento) e so
   tira a marca quando o bloco entra na tela. Em paginas longas isso vira um
   piscar constante enquanto se rola, e o conteudo fica "aparecendo" no lugar
   de simplesmente estar la. O JS continua marcando - nao ha nada a mexer nele -
   mas a marca deixa de ter efeito visual.
   Os graficos seguem se desenhando: aquilo e o dado, nao a entrada do bloco. */
.reveal, .reveal.reveal-pending{opacity:1;transform:none;transition:none}
.split .line>span, .split.reveal-pending .line>span{transform:none}

/* Painel de fechamento das landings: a foto nao estica.
   A coluna da foto vinha com lg:min-h-full, entao ela acompanhava a altura da
   coluna de texto. Como o object-cover preenche o espaco ampliando a imagem,
   qualquer texto mais longo empurrava os dois socios para fora do quadro. Com
   uma proporcao fixa a foto aparece inteira, do tamanho que ela tem. */
@media (min-width:1024px){
  .lp-final-socios,
  .mig-final .reveal.d1,
  .health-final-photo{min-height:0!important;align-self:center}
  .lp-final-socios img,
  .mig-final .reveal.d1 img,
  .health-final-photo img{aspect-ratio:3/4;height:auto;max-height:30rem;margin-inline:auto;width:auto}
}

/* Hero da home: a foto dos socios ocupa mais espaco.
   A coluna era fixa em 22rem, o que deixava o retrato pequeno demais para a
   primeira coisa que se ve no site. O texto continua com folga porque a
   primeira coluna e fracionaria e cede o necessario.

   A largura tambem manda na ALTURA da dobra: a moldura e 1:1, entao cada rem
   a mais na coluna e um rem a mais de secao. Em 30rem a foto sozinha passava
   de 480px e empurrava o botao verde para fora da tela em notebook de 768px.
   Os valores abaixo sao o maior tamanho em que a dobra inteira ainda cabe. */
@media (min-width:1024px){
  .hero-home{grid-template-columns:1fr minmax(0,22rem)}
  .home-hero h1{font-size:2.3rem}
}
@media (min-width:1280px){
  .hero-home{grid-template-columns:1fr minmax(0,24rem)}
  .home-hero h1{font-size:2.5rem}
}

/* A DOBRA E SO O HERO: a faixa escura seguinte nao aparece antes do scroll.
   O hero foi calibrado para CABER na dobra (blocos acima), entao em tela alta
   sobrava espaco e a faixa escura espiava por baixo. A altura minima fecha
   essa sobra.

   min-height, nunca height: se o conteudo passar da tela - fonte grande do
   sistema, zoom, tela muito baixa - a secao cresce em vez de cortar.

   Duas declaracoes de proposito: svh e a altura da tela COM a barra do
   navegador aberta, que e como o celular carrega a pagina. Em vh puro o hero
   ficaria mais alto que a area visivel no mobile. O vh acima fica de reserva
   para navegador sem suporte a svh, na mesma ordem usada nas landings. */
.home-hero{min-height:100vh;min-height:100svh}

/* Centralizar so no desktop. A secao tem overflow:hidden; se o conteudo for
   mais alto que a tela, centralizado o topo do hero sairia por cima e ficaria
   inalcancavel. No mobile ele so desce a partir do topo, que e seguro, e la o
   conteudo empilhado ja preenche a dobra sozinho. */
@media (min-width:1024px){
  .home-hero{display:flex;align-items:center}
  .home-hero>.hero-home{width:100%}
}

/* Hero da home em tela BAIXA: a dobra inteira continua cabendo.
   "Notebook de 768px" nao e o pior caso. Uma tela 1080p com a escala de 125% ou
   150% do Windows - o padrao de fabrica em quase todo notebook novo - entrega
   entre 560 e 640px de altura de CSS, e barra de favoritos come mais um pouco.
   Nessa faixa o botao verde e os nomes dos socios ficavam abaixo da dobra.

   A conta: altura da secao = 96px de padding-top (a barra fixa tem 92, esse
   valor nao pode encolher) + a mais alta das duas colunas + o padding de baixo.
   Como a foto e 1:1, a coluna da direita mede a largura dela mais os nomes;
   por isso o degrau abaixo mexe nas DUAS colunas, e nao so na tipografia.
   Ao mexer aqui, meca de novo em uma janela de 560px de altura. */
@media (min-width:1024px) and (max-height:740px){
  .home-hero{padding-bottom:1rem}
  .home-hero .hero-home{gap:2.5rem}
  .home-hero .hero-selo{margin-bottom:.6rem}
  /* A coluna de texto fica larga quando a foto encolhe. Sem um limite de
     medida o titulo passa de 85 caracteres por linha e cansa de ler. */
  .home-hero h1{font-size:2.1rem;max-width:34rem}
  .home-hero .hero-regua{margin-top:.8rem;margin-bottom:.8rem}
  .home-hero .hero-itens>li+li{margin-top:.4rem}
  .home-hero .hero-cta{margin-top:1.2rem}
  .home-hero .hero-cta a{padding-top:.8rem;padding-bottom:.8rem}
  .home-hero .hero-socios-nomes{margin-top:.9rem}
  .hero-home{grid-template-columns:1fr minmax(0,20rem)!important}
}
@media (min-width:1024px) and (max-height:620px){
  .home-hero h1{font-size:1.85rem}
  .home-hero .hero-itens{font-size:.875rem}
  .home-hero .hero-itens>li+li{margin-top:.3rem}
  .home-hero .hero-cta{margin-top:1rem}
  .home-hero .hero-socios-nomes{margin-top:.6rem}
  .hero-home{grid-template-columns:1fr minmax(0,16.5rem)!important}
}

/* Fechamento "Fale conosco" com a foto dos socios: cabe em uma tela.
   Empilhada no meio da coluna, a foto 4:5 media mais de 480px de altura e
   sozinha jogava os botoes e os cartoes de contato para fora da tela - para
   agir na chamada final a pessoa tinha de rolar mais uma vez. No desktop ela
   passa a ficar AO LADO do texto, e a altura dela responde a altura da janela,
   nao a largura da coluna. Sem foto o bloco continua centralizado, do mesmo
   jeito, em todas as outras paginas. */
/* No celular a foto fecha o bloco, depois dos botoes: quem chega ao fim da
   pagina encontra a acao primeiro e rola menos para chegar nela. */
.cta-com-foto{display:flex;flex-direction:column}
.cta-com-foto .cta-foto{margin:0 auto 2.25rem}
/* A moldura e quem manda no tamanho: altura presa a janela, largura vinda da
   proporcao. Limitar so a imagem nao servia - com loading=lazy ela ainda nao
   tem tamanho quando o bloco esta longe da dobra, e o espaco reservado saia
   errado. */
.cta-foto-moldura{aspect-ratio:4/5;height:min(18rem,40vh);margin-inline:auto;max-width:100%}
.cta-foto-moldura img{height:100%;object-fit:cover}
@media (min-width:1024px){
  .cta-com-foto{display:grid;grid-template-columns:1fr minmax(0,17rem);
    gap:3rem;align-items:center;text-align:left}
  .cta-com-foto .cta-foto{margin:0;max-width:none}
  .cta-com-foto .cta-texto p{margin-left:0}
  .cta-com-foto .cta-actions{justify-content:flex-start;margin-bottom:0}
  /* Com o texto alinhado a esquerda, os cartoes de contato acompanham a
     largura do painel em vez de ficarem centralizados no meio dele. */
  .cta-com-foto+.grid{margin-top:2.5rem;max-width:none}
}
/* Tela baixa: o fechamento encolhe junto com o hero, pelo mesmo motivo. */
@media (min-width:1024px) and (max-height:740px){
  .cta-final{padding-top:3rem;padding-bottom:3rem}
  .cta-final .glass-strong{padding:2rem}
  .cta-com-foto{gap:2.5rem}
  .cta-com-foto .cta-texto h2{font-size:2.25rem}
  .cta-com-foto .cta-texto p{margin-bottom:1.5rem}
  .cta-com-foto+.grid{margin-top:2rem}
  .cta-foto-moldura{height:min(18rem,34vh)}
}

/* ---------------------------------------------------------------------------
   AVISO DE COOKIES
   Estilo proprio, e nao utilitarias: o banner e um componente unico e o
   Tailwind daqui e pre-compilado (classe nova nao existiria no CSS).
   --------------------------------------------------------------------------- */
.cookie-aviso{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:0 1rem 1rem;
  opacity:0;transform:translateY(1rem);transition:opacity .3s ease,transform .3s ease;
  pointer-events:none}
.cookie-aviso.cookie-visivel{opacity:1;transform:none;pointer-events:auto}
.cookie-caixa{max-width:64rem;margin:0 auto;background:#fff;border:1px solid #d8e4f1;
  border-radius:1rem;padding:1.15rem 1.35rem;display:flex;flex-wrap:wrap;gap:1rem;
  align-items:center;justify-content:space-between;
  box-shadow:0 2px 6px rgba(0,18,50,.06),0 18px 44px -18px rgba(0,18,50,.35)}
.cookie-titulo{font-family:'Montserrat',sans-serif;font-weight:700;color:#001232;
  font-size:.95rem;margin:0 0 .2rem}
.cookie-texto{font-size:.85rem;line-height:1.5;color:#3d5573;margin:0;max-width:44rem}
.cookie-texto a{color:#0A2C4D;text-decoration:underline}
.cookie-acoes{display:flex;gap:.6rem;flex-shrink:0}
.cookie-btn{font-size:.8rem;font-weight:700;border-radius:99px;padding:.6rem 1.4rem;
  cursor:pointer;border:1px solid transparent;transition:background-color .2s ease}
.cookie-btn-primario{background:#0A2C4D;color:#fff}
.cookie-btn-primario:hover{background:#001232}
.cookie-btn-secundario{background:#fff;color:#0A2C4D;border-color:#a9c6e2}
.cookie-btn-secundario:hover{background:#eef4fa}
@media (max-width:639px){
  .cookie-caixa{flex-direction:column;align-items:stretch}
  .cookie-acoes{width:100%}
  .cookie-btn{flex:1}
}

/* ---------------------------------------------------------------------------
   PROGRAMA DE INDICACAO (programa-de-indicacao.php)

   O bloco navy das duas opcoes de recompensa, como no material do programa.
   Os cartoes ficam lado a lado a partir do md e empilhados no celular; quem
   define isso e o grid utilitario no PHP, aqui fica so o acabamento escuro.

   Estilo proprio, e nao utilitarias, porque o Tailwind do site e pre-compilado
   e estes gradientes nao existem no tema.
   --------------------------------------------------------------------------- */
.ind-recompensas-bloco{position:relative;overflow:hidden;
  background:linear-gradient(150deg,#001232,#0A2C4D 62%,#001232);
  box-shadow:0 34px 85px -42px rgba(0,18,50,.7)}
.ind-recompensas-bloco::before{content:"";position:absolute;top:-32%;right:-12%;
  width:34rem;height:34rem;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(76,129,190,.3),transparent 65%)}
.ind-recompensa{position:relative;display:flex;flex-direction:column;
  padding:1.75rem;border-radius:1.25rem;
  background:rgba(255,255,255,.055);border:1px solid rgba(169,198,226,.2)}
.ind-recompensa::before{content:"";position:absolute;left:1.75rem;right:1.75rem;top:0;
  height:2px;border-radius:2px;opacity:.7;
  background:linear-gradient(90deg,transparent,#4C81BE,transparent)}
.ind-recompensa-faixa{border-radius:.85rem;padding:.9rem 1.15rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(169,198,226,.18)}

/* ---------------------------------------------------------------------------
   SUBMENU DE SERVICOS (partials/header.php)

   Passando o mouse - ou entrando com Tab, dai o :focus-within - o item
   "Servicos" abre os tres servicos do escritorio. Sao links de verdade dentro
   de uma lista, entao nao ha JS envolvido: o menu continua funcionando com o
   teclado e com o script desligado.

   O padding-top do painel encosta nele o espaco entre o item e a lista. Sem
   isso o mouse atravessaria um vao "vazio" no caminho e o menu fecharia.
   --------------------------------------------------------------------------- */
.menu-drop{position:relative}
.menu-drop-t{display:inline-flex;align-items:center;gap:.3rem}
.menu-drop-i{transition:transform .25s ease}
.menu-drop:hover .menu-drop-i,
.menu-drop:focus-within .menu-drop-i{transform:rotate(90deg)}
.menu-drop-p{position:absolute;top:100%;left:50%;z-index:60;min-width:17rem;
  padding-top:.95rem;opacity:0;visibility:hidden;transform:translate(-50%,.45rem);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
.menu-drop:hover .menu-drop-p,
.menu-drop:focus-within .menu-drop-p{opacity:1;visibility:visible;transform:translate(-50%,0)}
.menu-drop-p ul{padding:.45rem;border:1px solid #e3ebf4;border-radius:1rem;background:#fff;
  box-shadow:0 18px 44px -20px rgba(0,18,50,.4)}
.menu-drop-p a{display:flex;align-items:center;gap:.6rem;padding:.62rem .75rem;
  border-radius:.7rem;color:#0A2C4D;font-size:.8rem;font-weight:600;
  letter-spacing:normal;text-transform:none;
  transition:background-color .18s ease,color .18s ease}
.menu-drop-p a:hover{background:#eef4fa;color:#001232}
.menu-drop-p a:focus-visible{outline:2px solid #4C81BE;outline-offset:1px}
.menu-drop-p .cb-icon{color:#4C81BE;flex:none}
.segment-card{min-height:100%}
@media (prefers-reduced-motion:reduce){
  .menu-drop-p,.menu-drop-i{transition:none}
}

/* ---------------------------------------------------------------------------
   PARCEIROS (partials/parceiros.php)

   A faixa da logo tem altura fixa: as marcas dos parceiros vem em proporcoes
   diferentes (a da H7 e quase quadrada, a da Nibo e deitada) e sem uma caixa
   comum uma apareceria o dobro da outra. Com altura fixa e object-contain cada
   uma ocupa o espaco que couber, centralizada, sem distorcer.
   --------------------------------------------------------------------------- */
.parceiro-logo{height:5rem}
.parceiro-logo img{max-height:var(--logo-h,4.5rem)}
a.parceiro-card{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
a.parceiro-card:hover{transform:translateY(-4px);border-color:#a9c6e2;
  box-shadow:0 24px 50px -30px rgba(0,18,50,.45)}